<template>
  <cs-container :is-back-to-top="true">
    <cs-table :table-data="tableData"
              :table-label="tableLabel"
              @handleButton="handleButton"
              @handleSortChange="handleSortChange"
              @handleSelectionChange="handleSelectionChange"
              :table-option="tableOption">
      <template slot="company" slot-scope="scope">
        <el-tag v-if="scope.row.company===0">申请中</el-tag>
        <el-tag v-if="scope.row.company===1" type="success">通过</el-tag>
        <el-tag v-if="scope.row.company===2" type="warning">退回</el-tag>
        <el-tag v-if="scope.row.company===3" type="warning">失效</el-tag>
      </template>
    </cs-table>
    <page-footer
      slot="footer"
      :current="page.current"
      :size="page.size"
      :total="page.total"
      @change="handlePaginationChange"/>
  </cs-container>
</template>
<script>
import CsTable from '@/components/cs-table'
import { test } from '@/api/api.js'
export default {
  data() {
    return {
      key: 'value',
      page: {
        current: 1,
        size: 0,
        total: 0
      },
      tableData: [
        { usr: '11', company: 1, email: '2222', registTime: '121231231', status: 0 },
        { usr: '11', company: 2, email: '2222', registTime: '1212312312', status: 1 },
        { usr: '11', company: 3, email: '2222', registTime: '1212312312', status: 0 }
      ],
      tableLabel: [
        { label: '用户名', param: 'usr', align: 'center', sortable: true, isShow: true },
        { label: '公司名称', param: 'company', align: 'center', slot: true },
        { label: '办公邮箱', param: 'email', align: 'center', width: '200' },
        { label: '注册时间', param: 'registTime', align: 'center', sortable: true, isShow: true },
        { label: '审核状态',
          param: 'status',
          align: 'center',
          sortable: true,
          render: (row) => {
            if (row.status === 1) {
              return 'weqee'
            }
          }
        }
      ],
      tableOption: {
        label: '操作',
        width: '200',
        options: [
          { label: '预览', type: 'primary', icon: 'el-icon-view', methods: 'preview' },
          { label: '审核', type: 'primary', icon: 'el-icon-upload2', methods: 'audit' }
        ]
      }
    }
  },
  components: {
    CsTable,
    'PageFooter': () => import('@/layout/header-aside/components/footer')
  },
  created() {
    this.query()
  },
  methods: {
    async query() {
      const data = test()
      console.log(data)
    },
    // 分页变化改动
    handlePaginationChange(val) {
      this.page = val
      this.$nextTick(() => {
        this.$refs.header.handleFormSubmit()
      })
    },
    handleButton(methods, row, index) {
      console.log(methods, row, index)
    },
    // 排序
    handleSortChange(val) {
      console.log(val)
    },
    handleSelectionChange(val) {
      console.log(val, '111')
    }
  }
}
</script>
